<gm:page title="My App" authenticate="false">
    <script type="text/javascript" src="resources/prototype.js">&nbsp;</script>
    <script type="text/javascript" src="resources/plotr_uncompressed.js">&nbsp;</script>
    
    
    <div id="wrapper">
      <h2>Horizontal oriented BarChart</h2>
      <div><canvas id="bars1" height="500" width="600"></canvas></div>
    </div>
        
    <script type="text/javascript">  
      // Define a dataset.
      var dataset = {
	'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73], [4, 2.56]],
	'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73], [4, 1.9]],
	'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]],
	'myFourthDataset': [[0, .86], [1, 0.83], [2, 3], [3, 1.73], [4, 0.76]],
      };

      // Define options.
      var options = {
	// Define a padding for the canvas node
	padding: {left: 30, right: 0, top: 10, bottom: 30},
	
	// Background color to render.
	backgroundColor: '#f2f2f2',
	
	// Use the predefined blue colorscheme.
	colorScheme: 'blue',
	
	// Render a horizontal oriented barchart.
	barOrientation: 'horizontal',
	
	// Set the labels.
   	xTicks: [
		{v:0, label:'day 1'}, 
      	{v:1, label:'day 2'}, 
      	{v:2, label:'day 3'},
      	{v:3, label:'day 4'}
	]
      };

      // Instantiate a new BarCart.
      var horizontal = new Plotr.BarChart('bars1',options);
      // Add a dataset to it.
      horizontal.addDataset(dataset);
      // Render it.
      horizontal.render();
  </script>
</gm:page>